import React from 'react'
import { Button, Checkbox, Form, Input } from 'antd'
import './LoginView.css'
const onFinish = (values) => {
    console.log('Success:', values)
}
const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
}
const Login = () => (
    <div className='login-container'>
        <Form
            className='login-form'
            name="basic"
            initialValues={{
                remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
        >
            <Form.Item
                label=""
                name="email"
                rules={[
                    {
                        required: true,
                        message: '请输入邮箱!',
                    },
                ]}
            >
            </Form.Item>
            <Form.Item
                label="用户名"
                name="username"
                rules={[
                    {
                        required: true,
                        message: '请输入用户名!',
                    },
                ]}
            >
                <Input className='login-input' />
            </Form.Item>

            <Form.Item
                label="密&nbsp;&nbsp;&nbsp;码"
                name="password"
                rules={[
                    {
                        required: true,
                        message: '请输入密码!',
                    },
                ]}
            >
                <Input.Password className='login-input' />
            </Form.Item>

            <Form.Item name="remember" valuePropName="checked" label={null} className='remember-me'>
                <Checkbox>记住我</Checkbox>
                <div></div>
            </Form.Item>

            <Form.Item label={null}>
                <Button type="primary" htmlType="submit" className='login-button'>
                    提交
                </Button>
            </Form.Item>
        </Form>
    </div>
)
export default Login